<!--
  湖北11选5投注页
-->
<template>
  <div class="fixed-header">
    <x-header>订单详情
      <a slot="right"><i class="iconfont icon-share font-xxxl"></i></a>
    </x-header>

    <list v-model="loading" :immediate-check="false" :finished="!hasmore" @load="onLoad">
      <div class="bg-white p-3 m-2 b-l" :key="i" v-for="(t, i) in tickets">
        <div class="mb-1">{{i + 1}}、方案内容: <em class="tips ml-2 spacing-sm" v-html="stringify(t)"></em></div>
        <div>{{t.ruleName}}，追加，{{t.bets}}注{{t.times}}倍</div>
        <div>{{t.text}} <i :class="t.status == 7 ? 'text-red' : 'text-grey'">{{t.tips}}</i></div>
      </div>
    </list>
  </div>
</template>

<script>
import { List } from 'vant'
import { stringify } from '../daletou/calculator'
import http from '../../http'

var size = 20

export default {
  components: {List},
  name: 'ticket',
  data: () => ({
    orderId: 0,
    tickets: [],
    loading: false,
    finished: true,
    page: 1
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/user/tickets', {orderId: to.query.id, size}).then(tickets => {
      next(vm => {
        vm.orderId = to.query.id
        vm.tickets = tickets
      })
    })
  },
  methods: {
    onLoad () {
      this.loading = true
      http.post('/user/tickets', {orderId: this.orderId, page: ++this.page, size}).then(tickets => {
        this.loading = false
        this.tickets = this.orders.concat(tickets)
        if (tickets.length < size) {
          this.hasmore = false
        }
      })
    },
    stringify (t) {
      var {lotteryType, content} = t
      return lotteryType == 'daletou' ?
        stringify(content) :
        `<b>${content.split('*').map(b => b.split('|').join(' ')).join(' | ')}</b>`
    }
  }
}
</script>
